$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  background-image: url('../../assets/loginBg.png');
  background-size: cover;
  background-position: 50% 50%;
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 420px;
    padding: 50px;
    max-width: 100%;
    margin: 180px auto 0;
    overflow: hidden;
    background-color:  #0000001c;
    border-radius: 10px;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
      letter-spacing: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .login-btn{
      color: #03e9f4;
      width: 100%;
      margin: 20px 0;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #03e9f4;
      cursor: pointer;
      transition: .5 all;
      letter-spacing: 4px;
      font-size: 20px;
      border-radius: 0;
      border-radius: 0;
      padding: 0;
      background-color: rgba(255,255,255,0);

      &:hover{
          background: #03e9f4;
            color: #011162;
            box-shadow:  0 0 5px #03e9f4,
                         0 0 25px #03e9f4,
                         0 0 50px #03e9f4,
                         0 0 250px #03e9f4;
      }
  }
}



html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.login-bg {
  position: relative;
  margin: auto;
  background: url("../../assets/loginBg.png") no-repeat;
  animation: main-img-hide 16s infinite step-end;
}

.login-bg::before,
.login-bg::after {
  position: absolute;
  width: 658px;
  height: 370px;
  top: 0;
  left: 0;
  background: inherit;
}

.login-bg::after {
  content: "";
  animation: glitch-one 16s infinite step-end;
}

.login-bg::before {
  content: "";
  animation: glitch-two 16s infinite 1s step-end;
}

@keyframes glitch-one {
  10% {
    clip-path: inset(65px 0 248px);
    left: -70px;
  }
  10.5% {
    clip-path: inset(28px 0 317px);
    left: -34px;
  }
  11% {
    clip-path: inset(71px 0 246px);
    left: 98px;
  }
  11.5% {
    clip-path: inset(133px 0 199px);
    left: -99px;
  }
  12% {
    clip-path: inset(103px 0 234px);
    left: 65px;
  }
  12.5% {
    clip-path: inset(273px 0 55px);
    left: 67px;
  }
  13% {
    clip-path: inset(92px 0 226px);
    left: 32px;
  }
  13.5% {
    clip-path: inset(218px 0 124px);
    left: 7px;
  }
  14% {
    clip-path: inset(153px 0 187px);
    left: 40px;
  }
  14.5% {
    clip-path: inset(182px 0 137px);
    left: -96px;
  }
  15.5% {
    clip-path: inset(10px 0 320px);
    left: -20px;
  }
  16% {
    clip-path: inset(10px 0 320px);
    left: -10px;
    opacity: 0;
  }
  45% {
    opacity: 0.5;
    left: -20px;
    filter: hue-rotate(90deg) saturate(1.3);
  }
  45.5% {
    left: 0px;
    filter: invert(1);
  }
  46% {
    clip-path: inset(150px 0 160px);
    left: 15%;
  }
  46.5% {
    clip-path: inset(20px 0 200px);
    left: -10%;
    transform: scale(1.1);
  }
  47% {
    clip-path: inset(240px 0 20px);
    left: -11%;
    transform: scale(1.2);
  }
  47.5% {
    clip-path: inset(20 0 20px);
    left: 13%;
    transform: scale(1.3);
    filter: invert(0);
  }
  48% {
    clip-path: inset(120 0 120px);
    left: 15%;
    transform: scale(1.1);
  }
  48.5% {
    clip-path: inset(260px 0 10px);
    left: -11%;
    transform: scale(1.2);
    filter: none;
  }
  49% {
    clip-path: inset(5px 0 350px);
    left: 11%;
    transform: scale(1.3);
  }
  49.5% {
    clip-path: inset(105px 0 210px);
    left: 0%;
    transform: scale(1.1);
  }
  50% {
    clip-path: inset(175px 0 160px);
    left: -11%;
  }
  50.5% {
    clip-path: inset(95px 0 230px);
    left: -14%;
    transform: scale(1.2);
  }
  51% {
    clip-path: inset(235px 0 12px);
    left: -14%;
  }
  51.5% {
    clip-path: inset(350px 0 7px);
    left: -14%;
  }
  52% {
    clip-path: inset(320px 0 27px);
    left: -12%;
    transform: scale(1.1);
  }
  52.5% {
    clip-path: inset(190px 0 127px);
    left: -11%;
    transform: scale(1.3);
    filter: hue-rotate(90deg) saturate(1.3);
  }
  54% {
    clip-path: inset(20px 0 20px);
    left: 12%;
    transform: scale(1.1);
    filter: none;
  }
  54% {
    background-image: none;
  }
}
@keyframes glitch-two {
  20% {
    clip-path: inset(211px 0 133px);
    left: -72px;
  }
  20.5% {
    clip-path: inset(293px 0 31px);
    left: -5px;
  }
  21% {
    clip-path: inset(186px 0 142px);
    left: -64px;
  }
  21.5% {
    clip-path: inset(296px 0 28px);
    left: -91px;
  }
  22% {
    clip-path: inset(288px 0 26px);
    left: -19px;
  }
  22.5% {
    clip-path: inset(126px 0 206px);
    left: 22px;
  }
  23% {
    clip-path: inset(42px 0 271px);
    left: -32px;
  }
  23.5% {
    clip-path: inset(267px 0 60px);
    left: -12px;
  }
  24% {
    clip-path: inset(103px 0 226px);
    left: 96px;
  }
  24.5% {
    clip-path: inset(109px 0 209px);
    left: 23px;
  }
  25.5% {
    clip-path: inset(10px 0 320px);
    left: -20px;
  }
  26% {
    clip-path: inset(10px 0 320px);
    left: -10px;
    opacity: 0;
  }
  45% {
    opacity: 0.3;
    left: -20px;
    filter: hue-rotate(45deg) saturate(1.1);
  }
  45.5% {
    left: 0px;
    filter: invert(1.2);
  }
  46% {
    clip-path: inset(50px 0 260px);
    left: -12%;
  }
  46.5% {
    clip-path: inset(120px 0 100px);
    left: 8%;
    transform: scale(1.2);
  }
  47% {
    clip-path: inset(40px 0 300px);
    left: 8%;
    transform: scale(1.3);
  }
  47.5% {
    clip-path: inset(220 0 70px);
    left: -9%;
    transform: scale(1.1);
    filter: invert(1.1);
  }
  48% {
    clip-path: inset(240px 0 120px);
    left: 11%;
    transform: scale(1.2);
  }
  48.5% {
    clip-path: inset(0px 0 310px);
    left: -12%;
    transform: scale(1.2);
    filter: none;
  }
  49% {
    clip-path: inset(255px 0 50px);
    left: 11%;
    transform: scale(1.3);
  }
  49.5% {
    clip-path: inset(10px 0 240px);
    left: 6%;
    transform: scale(1.1);
  }
  50% {
    clip-path: inset(275px 0 90px);
    left: -12%;
  }
  50.5% {
    clip-path: inset(195px 0 90px);
    left: 14%;
    transform: scale(1.4);
  }
  51% {
    clip-path: inset(35px 0 282px);
    left: -14%;
  }
  51.5% {
    clip-path: inset(350px 0 7px);
    left: 14%;
  }
  52% {
    clip-path: inset(20px 0 270px);
    left: -12%;
    transform: scale(1.1);
  }
  52.5% {
    clip-path: inset(90px 0 227px);
    left: -11%;
    transform: scale(1.3);
    filter: hue-rotate(150deg) saturate(1.3);
  }
  54% {
    clip-path: inset(220px 0 100px);
    left: 12%;
    transform: scale(1.1);
    filter: none;
  }
  55% {
    clip-path: inset(420px 0 100px);
    left: 52%;
    transform: scale(1.1);
    filter: none;
  }

  55.3% {
    clip-path: inset(90px 0 100px);
    left: 72%;
    transform: scale(1.1);
    filter: none;
  }

  55.7% {
    clip-path: inset(210px 0 200px);
    left: 82%;
    transform: scale(1.1);
    filter: none;
  }

  56% {
    clip-path: inset(40px 0 440px);
    left: 87%;
    transform: scale(1.1);
    filter: none;
  }

  56.4% {
    clip-path: inset(20px 0 450px);
    left: 55%;
    transform: scale(1.1);
  }


  56.7% {
    clip-path: inset(220px 0 450px);
    right: 55%;
    transform: scale(1.1);
  }


  56.9% {
    clip-path: inset(240px 0 450px);
    right: 5%;
    transform: scale(1.1);
  }
}
@keyframes main-img-hide {
  5% {
    filter: invert(1);
  }
  5.2% {
    filter: none;
  }
  10% {
    opacity: 0.5;
    filter: grayscale(1);
  }
  11% {
    filter: none;
    opacity: 1;
  }
  45% {
    opacity: 0.5;
    filter: grayscale(1);
  }
  46% {
    filter: none;
    opacity: 1;
  }
  53.5% {
    opacity: 0.5;
    filter: grayscale(1);
  }
  54% {
    filter: none;
    opacity: 1;
  }
  54.5% {
    opacity: 0.5;
    filter: hue-rotate(30deg);
  }
  55% {
    filter: none;
  }
  55.5% {
    background-image: none;
    filter: none;
    opacity: 1;
  }
  56% {
    background-image: url("../../assets/loginBg.png");
    opacity: 0.5;
  }
  56.5% {
    background-image: none;
  }
  57% {
    background-image: url("../../assets/loginBg.png");
    opacity: 0.8;
  }
  57.5% {
    opacity: 0.3;
  }
  58% {
    background-image: none;
  }

  58.8% {
    background-image: url("../../assets/loginBg.png");
    opacity: 1;
  }
}